<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')"/>
    <meta name="refresh" http-equiv="refresh" content="10">
    <style>
        /* 自定义右键菜单 */
        #menu {
            display: none;
            position: absolute;
            width: 150px;
            border: 1px solid #ccc;
            background: #eee;
        }

        #menu ul {
            margin: 5px 0;
        }

        #menu li {
            height: 30px;
            line-height: 30px;
            color: #21232E;
            font-size: 12px;
            text-align: center;
            cursor: default;
            list-style-type: none;
            border-bottom: 1px dashed #cecece;
        }

        #menu li:hover {
            background-color: #cccccc;
        }
    </style>
</head>
<body class="gray-bg">


<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <div class="btn-group-sm" id="toolbar" role="group">
                        <a class="btn btn-success" onclick="addProcess()">
                            <i class="fa fa-plus"></i> 新增节点
                        </a>
                        <a class="btn btn-success" onclick="addMyRelationship()">
                            <i class="fa fa-plus"></i> 新增关系
                        </a>
<!--                        修改刷新频率：<select id="selector" style="width: 200px;padding: 5px 2px 10px 5px;">-->
<!--                            <option value="5">5秒</option>-->
<!--                            <option value="15">15秒</option>-->
<!--                            <option value="30">30秒</option>-->
<!--                            <option value="60">1分钟</option>-->
<!--                            <option value="300">5分钟</option>-->
<!--                        </select>-->
                        </li>
                    </div>
                </div>
                <div class="ibox-content">
                    <div style="height:650px" id="main"></div>
                </div>
            </div>
        </div>

        <!-- 自定义鼠标右键菜单 -->
        <div id="menu">
            <ul>
                <li onclick="menuClick(1)">删除</li>
                <li onclick="menuClick(2)">修改</li>
                <li onclick="menuClick(3)">敬请期待</li>
                <li onclick="menuClick(4)">敬请期待</li>
                <li onclick="menuClick(6)">敬请期待</li>
                <li onclick="menuClick(7)">敬请期待</li>
                <li onclick="menuClick(8)">敬请期待</li>
                <li onclick="menuClick(9)">敬请期待</li>
            </ul>
        </div>

    </div>


    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: echarts-js"/>
    <script type="text/javascript">

        var prefix = ctx + "data/process";

        //右键点击后的param全局变量
        var param = null;

        //去除浏览器右键默认效果
        document.oncontextmenu = function () {
            return false;
        }


        // 自定义鼠标右键菜单栏
        var menu = document.getElementById('menu');
        document.body.oncontextmenu = function (e) { // 自定义body元素的鼠标事件处理函数
            var e = e || window.event;
            e.preventDefault(); //阻止系统右键菜单
            // 显示自定义的菜单调整位置
            let scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置
            let scrollLeft =
                document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置
            menu.style.display = 'block';
            menu.style.left = e.clientX + scrollLeft + 'px';
            menu.style.top = e.clientY + scrollTop + 'px';
        }

        // 鼠标点击其他位置时隐藏菜单
        document.onclick = function () {
            menu.style.display = 'none';
        }
        var menuClick = function (m) {
            if (null == param){
                alert("请右击节点选择功能！！！");
                return;
            }
            if (m == "1") {
                deleteNodeOrRelationship(param);
                //使用完参数,清除参数,避免阶段选乱
                param = null;
            } else if (m == "2") {

                if (param.name.toString().indexOf(">") != -1){
                    $.modal.alertWarning("关系不允许修改!!!");
                    return;
                }
                //修改节点
                var url = prefix + "/edit/"+encodeURI(encodeURI(param.name));
                $.modal.open("修改节点",url,"1050",750,null);

                //使用完参数,清除参数,避免阶段选乱
                param = null;
            } else if (m == "3") {


                //使用完参数,清除参数,避免阶段选乱
                param = null;
                alert("暂未开通")
            } else if (m == "4") {



                //使用完参数,清除参数,避免阶段选乱
                param = null;
                alert("暂未开通")
            }


        }


        //关系图
        $(function () {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            //从后台获取数据
            $.ajax({
                type: "get",
                url: prefix + "/list",
                data: {},
                success: function (result){
                    console.log(result.data.pro)
                    console.log(result.data.rel)
                    option = {
                        title: {
                            text: '任务调度'
                        },
                        tooltip: {},
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                type: 'graph',
                                layout: 'none',
                                symbolSize: 50,
                                roam: true,
                                label: {
                                    show: true
                                },
                                edgeSymbol: ['circle', 'arrow'],
                                edgeSymbolSize: [5, 10],
                                edgeLabel: {
                                    fontSize: 20
                                },
                                //图表数据
                                data: result.data.pro,
                                // links: [],   依赖关系
                                links: result.data.rel,
                                lineStyle: {
                                    opacity: 0.9,
                                    width: 2,
                                    curveness: 0
                                }
                            }
                        ]
                    };

                    console.log(option);
                    option && myChart.setOption(option);
                },
                error: function (errorMsg){
                    $.modal.error(errorMsg);
                }
            })

            // 处理点击事件并且跳转到相应的百度搜索页面
            myChart.on('contextmenu', function (params) {
                param = params;

            });
        });


        /**
         * 新增节点
         */
        function addProcess() {
            var url = prefix + "/add";
            $.modal.open("新增节点",url,"1050",750,null);
        }

        /**
         * 新增关系
         */
        function addMyRelationship(){
            var url = prefix + "/addMyRelationship";
            $.modal.open("新增关系",url,"1050",750,null);
        }

        /**
         * 删除节点，关系
         */
        function deleteNodeOrRelationship(param){
            $.modal.confirm("确定删除该节点信息吗？", function() {
                var name = param.name;
                $.ajax({
                    url: prefix + "/deleteNodeOrRelationship",
                    type: "post",
                    dataType: "json",
                    data: {"name" : name},
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            $.modal.alertSuccess(result.msg);
                        } else {
                            $.modal.alertError(result.msg);
                        }

                        $.modal.reload();
                    }
                });
            });
        }


                //定时刷新页面代码,暂不启动


                // /**
                //  * 刷新页面
                //  */
                // function myRefresh()
                // {
                //     window.location.reload();
                // }
                // /**
                //  * 第一个参数为下拉列表的id
                //  * 第二个参数为点击option的回调函数
                //  * @param idSelector
                //  * @param callFunc
                //  */
                // function addEventHandle(idSelector, callFunc) {
                //     var o = document.getElementById(idSelector);
                //     if (!o) return;
                //     (function() {
                //             o.onclick = function() {
                //                 var evt = window.event;
                //                 var selectObj = evt ? evt.srcElement : null;
                //                 // IE Only
                //                 if (evt && selectObj && evt.offsetY && evt.button != 2 && (evt.offsetY > selectObj.offsetHeight || evt.offsetY < 0)) {
                //                     setTimeout(function() {
                //                         var option = selectObj.options[selectObj.selectedIndex];
                //                         callFunc(option)
                //                     }, 60);
                //                 }
                //             }
                //         }
                //     )();
                // }
                //
                //
                //
                // var id = null;
                // var MyTime = null;
                //
                // /**
                //  * 回调函数（点击完option之后执行方法）
                //  * @param option
                //  */
                // function clickFunc(option) {
                //     var time = option.getAttribute('value');
                //     alert("www")
                //     //先清除定时器
                //     clearInterval(id);
                //     //再设置定时器
                //     id = setTimeout('myRefresh()',time*1000);
                //     MyTime = time;
                // }
                //
                // window.onload = function() {
                //     //给selector绑定option点击
                //     addEventHandle("selector", clickFunc);
                // }

    </script>
</div>
</body>
</html>